<template>
  <div class="cf" style="width: 100%;">
    <div class="fll">
      <n-input-group>
        <n-input v-model:value="searchParam.key" placeholder="请输入关键字搜索" :style="{ width: '100%' }" />
        <n-button type="primary" @click="search">
          <n-icon size="18" class="mx-2 action-icon">
            <SearchOutlined style="color: #fff;" />
          </n-icon>
        </n-button>
      </n-input-group>
    </div>
    <div class="flr">
      <n-button class="s-button mgr20 u-btn" @click="handleAdd">新增变量</n-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, unref, reactive, onMounted, computed } from 'vue';
import { SearchOutlined } from '@vicons/antd';
const searchParam = reactive({
  key: null,
});
const emits = defineEmits(['send']);

const props = defineProps({
  pageParam: {
    type: Object,
    required: true,
  },
});

// 搜索发送消息
function search() {
  console.log(searchParam);
  emits('send', 'refreshTable', searchParam);
}

// 新增变量
function handleAdd() {
  emits('send', 'addTable', null);
}

// 页面初始化
function init(params) {
  // 加载页面初始化数据
}
// 暴漏出init方法
defineExpose({
  init,
});
</script>
<style lang="less" scoped>
.flr {
  float: right;
}

.fll {
  float: left;
}

.cf:after {
  display: block;
  clear: both;
  content: '';
  visibility: hidden;
  height: 0;
}

.cf {
  zoom: 1;
  margin-bottom: 14px;
}
::v-deep .n-form.n-form--inline .n-form-item {
  width: 100% !important;
}
.s-button {
  background: linear-gradient(
    180deg,
    rgba(#2282e3, 0.7) 0%,
    rgba(103, 107, 109, 0.3) 45%,
    rgba(103, 107, 109, 0.3) 55%,
    rgba(#2282e3, 0.7) 100%
  );
  .n-button__border {
    display: none;
  }
}
</style>